<template>
  <div class="container">
    <nav-bar title="收藏" />
    <switch-tab 
      :tabList="tabList" 
      :curTabIndex="curTabIndex"
      :styleType="1"
      @itemClicked="tabClicked" 
    />
    <!-- 产品 -->
    <div class="products" v-if="curTabIndex === 0">
      <div 
        class="item" 
        v-for="(item, index) in productList" 
        :key="index"
        @click="goToProduct(item.Id)"
      >
        <img :src='item.Image' />
        <div class="dis">
          <h3>{{item.ProductName}}</h3>
          <div class="amount">{{item.FavoriteCount}}人收藏</div>
          <div class="price-del">
            <div class="price">
              <i>¥</i>
              <span>{{item.SalePrice}}</span>
            </div>
            <div class="delete" @click.stop="cancelProduct(item.Id)">
              <img src='../../assets/img/delete.png' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="products content" v-if="curTabIndex === 1">
      <div class="item" v-for="(item, index) in articleList" :key="index">
        <img :src='"http://shop.jdpin.com.cn/" + item.IconUrl' />
        <div class="dis">
          <h3>{{item.Title}}</h3>
          <div class="amount">
            <div class="con">{{item.Meta_Description}}</div>
          </div>
          <div class="price-del">
            <div class="time">
              {{item.AddDate}}
            </div>
            <div class="delete" @click.stop="cancelArticle(item.Id)">
              <img src='../../assets/img/delete.png' />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import SwitchTab from 'components/common/SwitchTab'
import { getUserCollectionProduct, getUserCollectionArticle } from '../../network/user'
import { collectProduct } from '../../network/product'
import { collectBrandArticle } from '../../network/brand'
import { Toast } from 'vant'
import { format } from 'date-fns'

export default {
  components: {
    NavBar,
    SwitchTab
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      curTabIndex: 0,
      tabList: [
        '商品',
        '内容'
      ],
      productList: [],
      articleList: [],
    }
  },
  mounted() {
    this.getUserCollectionProduct()
    this.getUserCollectionArticle()
  },
  methods: {
    getUserCollectionProduct(){
      let requestData = {
        UserKey: this.userKey,
        pageNo: 1,
        pageSize: 200,
      }
      getUserCollectionProduct(requestData, res => {
        this.productList = res.data
      })
    },
    getUserCollectionArticle(){
      let requestData = {
        userkey: this.userKey,
      }
      getUserCollectionArticle(requestData, list => {
        list.map(item => {
          item.AddDate = format(new Date(item.AddDate),'yyyy-MM-dd HH:mm:ss')
          return item
        })
        this.articleList = list
      })
    },
    tabClicked(e){
      this.curTabIndex = e
    },
    goToProduct(id){
      this.$router.push({
        path: '/product',
        query: {
          id
        }
      })
    },
    cancelProduct(productId){
      let requestData = {
        userkey: this.userKey,
        productId
      }
      collectProduct(requestData, Msg => {
        Toast(Msg)
        this.getUserCollectionProduct()
      })
    },
    cancelArticle(articleId){
      let requestData = {
        userkey: this.userKey,
        articleId
      }
      collectBrandArticle(requestData, msg => {
        Toast(msg)
        this.getUserCollectionArticle()
      })
    },
  },
}
</script>

<style scoped>
.container{
  background-color: #ffffff;
}
.products{
  border-top: 2px solid #f4f4f4;
  padding-bottom: 20px;
}
.products .item{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 10px;
  padding: 0 10px;
}
.products .item img{
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  margin-right: 10px;
  object-fit: cover;
}
.products .item .dis{
  flex-grow: 1;
  min-width: 100px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.products .item .dis h3{
  font-size: 16px;
  width: 100%;
  line-height: 22px;
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-sizing: border-box;
}
.products .item .dis .amount{
  flex-grow: 1;
  padding-top: 5px;
  color: #999999;
}
.products .item .dis .amount .con{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.products .item .dis .price-del{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.products .item .dis .price{
  color: #d50721;
}
.products .item .dis .time{
  color: #999999;
}
.products .item .dis .price span{
  font-size: 20px;
  padding-left: 5px;
}
.products .item .dis .delete{
  width: 30px;
  height: 30px;
}
.products .item .dis .delete img{
  width: 70%;
  height: 70%;
  margin: 15%;
}
</style>